<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>信用总览</h4>
          </div>
          <column-echart ref="columnEchart"></column-echart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <map-echart ref="mapEchart"></map-echart>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>双随机统计分析</h4>
          </div>
          <column-echart2 ref="columnEchart2"></column-echart2>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>信用分险占比</h4>
          </div>
          <pie-echart :listData="listData" :id="p1"></pie-echart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>各行业信用风险情况</h4>
          </div>
          <line-echart></line-echart>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>双随机占比</h4>
          </div>
          <pie-echart2 :listData="listData" :id="p2"></pie-echart2>
        </el-card>
      </el-col>
    </el-row>

    <!-- <div id="myChart" style="width: 600px;height: 500px;"></div> -->
  </div>
</template>

<script>
// import mapEchart from "./creditModule/mapEchart";
import mapEchart from "./creditModule/mapEchart";
import lineEchart from "./creditModule/lineEchart";
import roseEchart from "./HomeModule/roseEchart";
import columnEchart from "./creditModule/columnEchart";
import columnEchart2 from "./creditModule/columnEchart2";
import pieEchart from "./creditModule/pieEchart";
import pieEchart2 from "./creditModule/pieEchart2";

// Vue.prototype.$echarts = echarts
require("echarts"); // echarts theme
export default {
  name: "chart",
  components: {
    mapEchart,
    lineEchart,
    roseEchart,
    columnEchart,
    columnEchart2,
    pieEchart,
    pieEchart2
  },
  data() {
    return {
      listArr: [], //城市json
      type: 0,
      cardList: [
        {
          title: "食品安全",
          num: "2324"
        },
        {
          title: "信用监管",
          num: "3353"
        },
        {
          title: "行政执法",
          num: "545"
        },
        {
          title: "一品一码",
          num: "33334"
        }
      ],
      listData: [
        { value: 1048, name: "一级风险 45%" },
        { value: 735, name: "二级风险 32%" },
        { value: 580, name: "三级风险 8%" },
        { value: 484, name: "四级风险 4%" }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.home {
  display: flex;
  justify-content: space-around;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.buttom {
  width: 200px;
  margin: 20px;
}

#myChart {
  width: 400px;
  height: 400px;
}
</style>
